<template>
  <div class="user_login">
    <div class="form">
      <p class="form-title">登录/注册</p>
      <div class="input-container">
        <input v-model="loginFrom.userName" @keyup.enter="userLogin" placeholder="请输入用户名" type="text">
      </div>
      <div class="input-container">
        <input v-model="loginFrom.password" @keyup.enter="userLogin" placeholder="请输入密码" :type="show?'text':'password'">
        <span>
            <svg @click="showPassword" class="show" stroke="currentColor" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
              <path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
            </svg>
          </span>
      </div>
      <button @click="userLogin" class="submit">
        登录/注册登录
      </button>
      <div @click="back" class="back">
        <img style="width: 100%;height: 100%" src="@/assets/img/back.png" alt="">
      </div>
    </div>

  </div>
</template>

<script setup>

import {reactive, ref} from "vue";
  import {useRouter} from "vue-router";
import {login} from "@/api/login/index.js";
import {notice} from "@/util/playMsgNitific.js";

  let show = ref(false)
  let router = useRouter();
  let loginFrom = reactive({
    userName:'',
    password:'',
    loginType:2
  });


  function showPassword(){
    show.value = !show.value
  }

  function back(){
    router.push("/")
  }
  /**
   * 登录方法
   */
  function userLogin(){
    //用户名正则，4到16位（字母，数字，下划线，减号）
    const uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
    const pPattern = /(?=^.{6,16}$)/;
    if (!uPattern.test(loginFrom.userName)) {
      notice('warning',"用户名不合法")
      return
    }else if (!pPattern.test(loginFrom.password)){
      notice('warning',"密码不合法")
      return
    }
    login(loginFrom).then(res=>{
      localStorage.setItem("wx_token",res.data.data)
      // 跳转到首页
      router.push("/wx/chat")
    })
  }
</script>

<style lang="less" scoped>
.back{
  position: absolute;
  cursor: pointer;
  top: 10px;
  left: 10px;
  height: 20px;
  width: 20px;
}
.show{
  cursor: pointer;
}
.user_login{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}
.form {
  position: relative;
  background-color: rgba(253,253,253,0.4);
  display: block;
  padding: 1rem;
  max-width: 350px;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.form-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  text-align: center;
  color: #000;
}

.input-container {
  position: relative;
}

.input-container input, .form button {
  outline: none;
  border: 1px solid #e5e7eb;
  margin: 8px 0;
}

.input-container input {
  background-color: #fff;
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  width: 300px;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.input-container span {
  display: grid;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  place-content: center;
}

.input-container span svg {
  color: #9CA3AF;
  width: 1rem;
  height: 1rem;
}

.submit {
  display: block;
  padding: 0.75rem 1.25rem;
  background-color: #07c160;
  border-radius: 10px;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  width: 100%;
  cursor: pointer;
  letter-spacing:3px;
}

.signup-link {
  color: #6B7280;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
}

.signup-link a {
  text-decoration: underline;
}
</style>